<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <script>function callback(data) {
            console.log(data);
        }</script>
    <!-- <script src="http://localhost:8888"></script> -->
    <img src="https://p26-passport.byteacctimg.com/img/mosaic-legacy/3795/3033762272~300x300.image" alt="">
    <script>
        function jsonp(url, data = {}, callback = 'callback',cb) {
            // console.log(url,data,callback);
            let dataStr = url.indexOf('?') === -1 ? '?' : '&';
            for(let key in data){
                dataStr += `${key}=${data[key]}&`
            }
            // with padding
            dataStr += `callback=${callback}`
            let scriptSrc = url + dataStr;
            // console.log(scriptSrc);
            let oScript = document.createElement('script');
            oScript.src = scriptSrc
            document.body.appendChild(oScript);
            window[callback] = (data) => {
                // 完成跨域请求，做接下来的任务
                cb(data);
            }
        }

        // 挂载script标签解决同源机制
        jsonp('http://localhost:8888/?a=1', {
            page: 1,
            cate: 'recommend'
        },'recommendCallback',(data)=>{
            console.log(data,'is handsome');
        })
        //          JSONP
        // 1. script src DOM 动态构建
        // 2. callback  动态指定
        // 跨域请求  Ajax fetch  同源策略
        // 能发送吗？ cors
        // 服务器能接受吗
        // 数据到达之后能相信吗？
        // fetch('http://localhost:8888/')
        //     .then(data => data.json())
        //     .then(data=>{
        //         console.log('---------');
        //     })
    </script>
</body>
</html>